<template>
	<view class="info">
		<!-- 导航功能条 -->
		<view class="info-nav">
			<view class="info-nav-left" @tap="gotoHome">
				<u-icon name="arrow-leftward" size="25px"></u-icon>
			</view>
			<view class="info-nav-right">
				<u-icon name="more-dot-fill" size="25px"></u-icon>
			</view>
		</view>

		<!-- 背景 -->
		<view class="info-bg">
			<view class="info-bg-title">
				<text style="font-size: 25px;">{{time}}</text>
				<text>每天好音乐</text>
			</view>
			<view class="info-bg-btn">历史日推</view>
		</view>

		<!-- 底部渲染盒子 -->
		<view class="info-item">
			<view class="info-item-top">
				<view class="info-item-top-play">
					<u-icon name="play-circle-fill" size="20"></u-icon>
					<text>播放全部</text>
				</view>
				<view class="info-item-top-choice">
					<u-icon name="checkmark-circle" size="20"></u-icon>
				</view>
			</view>
			<view class="info-item-box" v-for="(item,index) in recommend" :key="index">
				<view class="info-item-box-cover" @tap="playMusic(item.id,index)">
					<image :src="item.al.picUrl" mode=""></image>
					<view class="info-item-box-cover-text">
						<text class="info-item-box-cover-text-tx1">{{item.name}}</text>
						<text class="info-item-box-cover-text-tx2">{{item.ar[0].name}} - {{item.al.name}}</text>
					</view>
				</view>
				<view class="info-item-box-mv">
					<image src="@/static/songs/mvs.png" mode="" v-if="item.mv!=0"></image>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		getEveSongs,
	} from '@/http/home.js'
	export default {
		data() {
			return {
				recommend: [], //每日推荐的数据
				time: moment().format("MM/DD"), //当前日期
			}
		},
		onLoad() {
			this.Everyday()
		},
		methods: {
			//获取每日推荐的数据
			async Everyday() {
				const {
					data: res
				} = await getEveSongs();
				this.recommend = res.dailySongs
			},
			// 点击播放
			 playMusic(id, index) {
				this.$store.dispatch("playIndex", index);
				this.$store.dispatch("playMusic", {
					list: this.recommend,
					index: index,
					listid: id
				})
			},
			//回到首页
			gotoHome() {
				uni.navigateBack({
					data: 1
				})
			}
		},
		filters: {
			time(time) {
				return moment(time).format("MMM-Do-YY");
			}
		}

	}
</script>

<style lang="scss">
	.info {
		height: var(--status-bar-height);
		width: 100%;

		// 导航
		&-nav {
			display: flex;
			justify-content: space-between;
			margin: 30rpx 25rpx;
		}

		// 背景
		&-bg {
			height: 350rpx;
			border-radius: 15rpx;
			background-image: url(@/static/icon/activity01.jpg);
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin: 30rpx 25rpx;

			&-title {
				color: #fff;
				display: flex;
				padding: 15rpx 15rpx;
				flex-direction: column;
			}

			&-btn {
				width: 180rpx;
				height: 55rpx;
				margin: 15rpx 15rpx;
				background-color: #eeeeee;
				border-radius: 20px;
				font-size: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		// 渲染盒子
		&-item {
			padding: 30rpx 30rpx;

			&-top {
				display: flex;
				justify-content: space-between;

				&-play {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						padding-left: 18rpx;
						font-size: 18rpx;
						font-weight: bold;
					}
				}
			}

			&-box {
				margin-top: 35rpx;
				display: flex;

				&-cover {
					display: flex;
					// justify-content: center;
					align-items: center;

					image {
						height: 90rpx;
						width: 90rpx;
						border-radius: 10rpx;
					}

					&-text {
						display: flex;
						flex-direction: column;
						padding: 0 18rpx;
						width: 240px;

						&-tx1 {
							width: 210px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						&-tx2 {
							font-size: 12rpx;
							color: #9f9997;
							width: 210px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}

				&-mv {
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

	}
</style>
